<template>
  <div ref="wrapper_hook" class="wrapper"/>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'businessBar',
  props: {
    source: {
      type: Array,
      default: () => []
    },
    type: {
      type: [Number, String],
      default: 1
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    source(newValue) {
      this._initECharts(newValue)
    }
  },
  mounted() {
    this.$nextTick(() => {
      this._initECharts(this.sourceData)
      window.addEventListener('resize', this.resize)
    })
  },
  destroyed() {
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    _initECharts(data) {
      if (!data || data.length === 0) return
      this.chart ? this.update(data) : this.draw(data)
    },
    getSeries(data, name, color) {
      return {
        name,
        type: 'line',
        data,
        smooth: true,
        symbolSize: 5,
        label: {
          show: false,
          position: 'top',
          fontSize: 12,
          color: '#8d8d8d'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {offset: 0, color: `rgba(${color},0.7)`},
            {offset: 1, color: `rgba(${color},0.0)`}
          ])
        },
        itemStyle: {
          normal: {
            color: `rgba(${color},1)`,
            width: 0
          }
        }
      }
    },
    normalizeData(data) {
      let xAxis = []
      const series = []
      let state = {'0': '订单', '1': '金额', '2': '欠款', '3': '性质分析'}
      if (Number(this.type) !== 3) {
        const result = []
        for (let i = 0; i < data.length; i++) {
          xAxis.push(data[i].date)
          result.push(data[i].result)
        }

        series.push(this.getSeries(result, state[this.type], '40,220,50'))
      } else {
        const citySer = [] // 市际
        const countySer = [] // 县际
        const provinceSer = [] // 省际
        for (let i = 0; i < data.length; i++) {
          xAxis.push(data[i].date)
          citySer.push(data[i].citySer)
          countySer.push(data[i].countySer)
          provinceSer.push(data[i].provinceSer)
        }
        series.push(this.getSeries(countySer, '县际', '40,220,50'))
        series.push(this.getSeries(citySer, '市际', '249, 193, 78'))
        series.push(this.getSeries(provinceSer, '省际', '40,222,246'))
      }
      return {xAxis, series}
    },
    formatterTool(params) {
      let result = ''
      params.forEach(item => {
        result += `${item.marker} ${item.seriesName}：${item.data}<br />`
      })
      return result
    },
    draw(data) {
      const {xAxis, series} = this.normalizeData(data)
      this.chart = echarts.init(this.$refs.wrapper_hook)
      const options = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: params => this.formatterTool(params)
        },
        grid: {
          left: '2%',
          top: '12%',
          right: 0,
          bottom: '6%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xAxis,
          axisTick: {
            show: false,
            alignWithLabel: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#C7C7C7FF'
            }
          },
          axisLabel: {
            alignWithLabel: true,
            color: '#5a5a5a',
            size: 14,
            // interval: 1,
            // padding: [20, 0, 0, 0],
            align: 'center'
          },
          splitLine: false
        },
        yAxis: [
          {
            // name: '金额(数量)',
            padding: [0, 0, 0, 10],
            type: 'value',
            scale: true,
            splitNumber: 6,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#b4b4b4'
              }
            }
          }
        ],
        series: series
      }
      this.chart.setOption(options)
    },
    update(data) {
      if (!this.chart) return
      const {xAxis, series} = this.normalizeData(data)
      const options = this.chart.getOption()
      options.xAxis[0].data = xAxis
      options.series = series
      this.chart.setOption(options, true)
    },
    resize(delay = 400) {
      setTimeout(() => {
        this.chart && this.chart.resize()
      }, delay)
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: 270px;
  color: #29d978;
}
</style>
